<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/zqmbootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/rank.css">
    <script>
        $(document).ready(function () {
            flash();

            $.get("${pageContext.request.contextPath}/directory/initYear",function (data) {
                let context = ``;
                for (let i = 0; i < data.data.length; i++) {
                    context = context + `
                        <li class="rankyear asciifont"><a class="rank_tag_value">` + data.data[i] + `</a></li>
                    `;
                }
                $("#cats").html(context);
                // 添加年份点击事件
                $("#cats>li").click(function () {
                    $(".year-active").removeClass("year-active");
                    $(this).addClass("year-active");
                    flash($(this).children().html());
                })
            })

            // 点击所有
            $("#allAnim").click(function () {
                $(".year-active").removeClass("year-active");
                flash();
            })

            $("#tagyears").click(function () {
                if ($("#cats").attr("hidden") == "hidden") {
                    $(".openorclose").html("-");
                    $("#cats").removeAttr("hidden");
                } else {
                    $(".openorclose").html("+");
                    $(".year-active").removeClass("year-active");
                    $("#cats").attr("hidden","hidden");
                }
            })
        })

        function flash(year) {
            $.post("${pageContext.request.contextPath}/animation/flashTop",{"time":year},function (data) {
                if (data.flag) {
                    let topList = data.data;
                    console.log(topList.length)
                    let context = ``;
                    if (topList.length > 40) {
                        for (let i = 40; i < topList.length; i++) {
                            context = addContext(context, i, topList);
                        }
                        $("#right").html(context);
                    }
                    if (topList.length > 20) {
                        context = ``;
                        if (topList.length < 40) {
                            for (let i = 20; i < topList.length; i++) {
                                context = addContext(context, i, topList);
                            }
                        } else {
                            for (let i = 20; i < 40; i++) {
                                context = addContext(context, i, topList);
                            }
                        }
                        $("#center").html(context);
                    }
                    if (topList.length > 0) {
                        context = ``;
                        if (topList.length < 20) {
                            if (topList.length <= 10) {
                                for (let i = 0; i < topList.length; i++) {
                                    context = addTopContext(context, i, topList);
                                }
                            } else {
                                for (let i = 0; i < 10; i++) {
                                    context = addTopContext(context, i, topList);
                                }
                                for (let i = 10; i < topList.length; i++) {
                                    context = addContext(context, i, topList);
                                }
                            }
                        } else {
                            for (let i = 0; i < 10; i++) {
                                context = addTopContext(context, i, topList);
                            }
                            for (let i = 10; i < 20; i++) {
                                context = addContext(context, i, topList);
                            }
                        }
                        $("#left").html(context);
                    }
                } else {
                    $("#left").html(data.errorMsg);
                    $("#center").html("");
                    $("#right").html("");
                }
            },"json")
        }
        
        function addContext(context, i, topList) {
            context = context + `
                <li class="rank_text">
                    <span class="rank_text_idx  asciifont">` + (i+1) + `</span>
                    <a href=${pageContext.request.contextPath}/animation/show_detailed?aid=` + topList[i].animationSimple.aid + `>
                    <span class="rank_text_name">` + topList[i].animationSimple.aname + `</span></a>
                    <span class="rank_value asciifont">` + topList[i].animationSimple.people_num + `</span>
                </li>
            `;
            return context;
        }

        function addTopContext(context, i, topList) {
            context = context + `
                <li class="rank_text">
                    <span class="rank_text_idx  asciifont rank_text_idx_top">` + (i+1) + `</span>
                    <a href=${pageContext.request.contextPath}/animation/show_detailed?aid=` + topList[i].animationSimple.aid + `>
                    <span class="rank_text_name">` + topList[i].animationSimple.aname + `</span></a>
                    <span class="rank_value asciifont">` + topList[i].animationSimple.people_num + `</span>
                </li>
            `;
            return context;
        }
    </script>
    <style>
        #cats li{
            padding-left: 10px;
            padding-bottom: 5px;
        }
        .year-active{
            border-radius: 10px;
            border-left: 2px solid  #f66666;
            border-bottom: 2px solid  #f66666;
        }
    </style>
</head>
<body>
    <c:import url="../user_view/component/header.jsp"></c:import>
    <div id="container" class="container">
        <div class="spaceblock1"></div>
        <div class="div_left baseblock">
            <div class="blockcontent">
                <div class="baseblock2">
                    <div class="blocktitle" style="">排行分类</div>
                    <div class="blockcontent" style="padding: 0px;">
                        <div class="baseblock">
                            <div class="blocktitlexx" style="">
                                <a class="rank_tag rank_tag_current" id="allAnim">所有动画播放排行</a></div>
                            <div class="blocktitlexx">
                                <a id="tagyears">
                                    <span class="openorclose" style="color: #FFFFFF">+</span>
                                    <span class="rank_tag">分类动画播放排行</span>
                                </a>
                            </div>
                            <ul id="cats" class="blockcontent" style="padding-left: 44px;" hidden="hidden">

                                <li class="rankyear asciifont"><a class="rank_tag_value">2021</a></li>

                                <li class="rankyear asciifont"><a class="rank_tag_value">2020</a></li>

                                <li class="rankyear asciifont"><a class="rank_tag_value">2019</a></li>

                                <li class="rankyear asciifont"><a class="rank_tag_value">2018</a></li>

                                <li class="rankyear asciifont"><a class="rank_tag_value">2017</a></li>

                                <li class="rankyear asciifont"><a class="rank_tag_value">2016</a></li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="div_right baseblock">
            <div class="blockcontent">
                <div class="baseblock2">
                    <div class="blocktitle">全部动画排行榜 TOP60</div></div>
                <div class="baseblock">
                    <div class="blockcontent div_right_r_3">
                        <ul class="div_right_r" id="left"></ul>

                        <ul class="div_right_r" id="center"></ul>

                        <ul class="div_right_r" id="right"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
